<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>同步登录 - 会员中心 -{$sitename}</title>
{include file="user_include" /}
<script src="{$apicss}admin/zanpiancms/libs/jquery-cxselect/js/jquery.cxselect.js"></script>
<link rel="stylesheet" type="text/css" href="{$apicss}admin/uploadify/jquery.Jcrop.min.css" media="all">
<link rel="stylesheet" type="text/css" href="{$apicss}admin/uploadify/uploadify.css" media="all">
<script type="text/javascript" src="{$apicss}admin/uploadify/jquery.uploadify-3.1.min.js"></script>
<script type="text/javascript" src="{$apicss}admin/uploadify/jquery.Jcrop.min.js"></script>
</head>
<body class="center_body">
{include file="center_header" /}
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-12 box-main-content"> 
{include file="center_info_min" /}
{include file="center_left" /}
</div>
<div class="col-md-9 col-sm-8 col-xs-12 xs-bt-20 box-main-side">
<div class="user-box clearfix">
<div class="user-infos">
<ul class="nav nav-tabs">
  <li class="active"><a href="#tab_1" data-toggle="tab">基本资料</a></li>
  <li><a href="#tab_2" data-toggle="tab">订阅设置</a></li>
  <li><a href="#tab_3" data-toggle="tab">头像修改</a></li>
  <li><a href="#tab_4" data-toggle="tab">同步绑定</a></li>
  <li><a href="#tab_5" data-toggle="tab">密码修改</a></li>
</ul>
<div class="tab-pane fade active in" id="tab_1">
<form class="form-horizontal"  method="post" role="form" action="{:zp_url('user/center/info')}" onSubmit="return false;">
           <div class="form-group">
                <label for="username" class="control-label col-xs-12 col-sm-3">您的用户帐号：</label>
                <div class="col-xs-12 col-sm-6">
                    <input type="text" class="form-control" name="username" value="{$userinfo.username}" readonly="readonly" autocomplete="false">
                </div>
           </div> 
          <div class="form-group">
                <label for="email" class="control-label col-xs-12 col-sm-3">您的Email地址</label>
                <div class="col-xs-8 col-sm-4">
                    <input type="text" class="form-control" name="info[email]" value="{$userinfo.email}"   readonly="readonly" autocomplete="false">
                    
                </div>
                <div class="col-xs-4 col-sm-2">
                <a href="javascript:;" class="btn btn-warning btn-sm" id="user-email">修改</a>
                </div>
            </div>   
           <div class="form-group">
                <label for="nickname" class="control-label col-xs-12 col-sm-3">您的昵称：</label>
                <div class="col-xs-12 col-sm-6">
                    <input type="text" class="form-control" name="info[nickname]" value="{$userinfo.nickname}" autocomplete="false">
                </div>
           </div>
           <div class="form-group">
                <label for="sex" class="control-label col-xs-12 col-sm-3">性别：</label>
                <div class="col-xs-12 col-sm-6">
                   <select name="info[sex]" class="form-control selectpicker">
                        <option value="1">男</option>
                        <option value="2" {eq name="userinfo.detail['sex']" value="2"}selected{/eq}>女</option>
                    </select>
                </div>
           </div> 
            <div class="form-group">
                <label for="birthday" class="control-label col-xs-12 col-sm-3">出生年月日：</label>
                <div class="col-xs-12 col-sm-6">
                <input class="form-control" name="info[birthday]" value="{$userinfo.detail.birthday}" placeholder="出生日期格式2018-01-01" type="datetime" style="text-align:center">
                </div>
           </div>
            <div class="form-group">
                <label for="dq" class="control-label col-xs-12 col-sm-3">出生年月日：</label>
                <div class="col-xs-12 col-sm-6">
<div class="form-inline" id="cxselect">
<select class="province form-control" data-first-title="选择省" name="info[prov]">
<option value="">请选择</option>
<option value="{$userinfo.detail.prov|default=''}" selected="">{$userinfo.detail.prov|default=''}</option>
</select>
<select class="city form-control" data-first-title="选择市" name="info[city]">
<option value="">请选择</option>
<option value="{$userinfo.detail.city|default=''}" selected="">{$userinfo.detail.city|default=''}</option>
</select>
<select class="area form-control" data-first-title="选择地区" name="info[area]">
<option value="">请选择</option>
<option value="{$userinfo.detail.area|default=''}" selected="">{$userinfo.detail.area|default=''}</option>
</select>
</div>
                </div>
           </div>  
           <div class="form-group">
                <label for="edu" class="control-label col-xs-12 col-sm-3">学历：</label>
                <div class="col-xs-12 col-sm-6">
                    <select name="info[edu]" class="form-control selectpicker">
                  <option value="">选择学历</option>
                  <option value="1" {eq name="userinfo.detail.edu" value="1"}selected{/eq}>小学</option>
                  <option value="2" {eq name="userinfo.detail.edu" value="2"}selected{/eq}>初中</option>
                  <option value="3" {eq name="userinfo.detail.edu" value="3"}selected{/eq}>高中/中专</option>
                  <option value="4" {eq name="userinfo.detail.edu" value="4"}selected{/eq}>大专</option>
                  <option value="5" {eq name="userinfo.detail.edu" value="5"}selected{/eq}>本科</option>
                  <option value="6" {eq name="userinfo.detail.edu" value="6"}selected{/eq}>硕士及以上</option>
                    </select>
                </div>
           </div>
           <div class="form-group">
                <label for="industry" class="control-label col-xs-12 col-sm-3">行业：</label>
                <div class="col-xs-12 col-sm-6">
                    <select name="info[industry]" class="form-control selectpicker">
                  <option value="">选择行业</option>
                  <option value="1"  {eq name="userinfo.detail.industry" value="1"}selected{/eq} >教育/学生</option>
                  <option value="2"  {eq name="userinfo.detail.industry" value="2"}selected{/eq}>计算机/互联网</option>
                  <option value="3"  {eq name="userinfo.detail.industry" value="3"}selected{/eq}>建筑</option>
                  <option value="4"  {eq name="userinfo.detail.industry" value="4"}selected{/eq}>金融/房产</option>
                  <option value="5"  {eq name="userinfo.detail.industry" value="5"}selected{/eq}>政府/公共服务</option>
                  <option value="6"  {eq name="userinfo.detail.industry" value="6"}selected{/eq}>电信/网络</option>
                  <option value="7"  {eq name="userinfo.detail.industry" value="7"}selected{/eq}>服务</option>
                  <option value="8"  {eq name="userinfo.detail.industry" value="8"}selected{/eq}>传媒/娱乐</option>
                  <option value="9"  {eq name="userinfo.detail.industry" value="9"}selected{/eq}>农林/化工</option>
                  <option value="10" {eq name="userinfo.detail.industry" value="10"}selected{/eq}>旅游/交通</option>
                  <option value="11" {eq name="userinfo.detail.industry" value="11"}selected{/eq}>其他</option>
                    </select>
                </div>
           </div> 

           <div class="form-group">
                <label for="signature" class="control-label col-xs-12 col-sm-3">个性签名：</label>
                <div class="col-xs-12 col-sm-6">
                 <textarea cols="40" class="form-control txt" name="info[signature]" id="signature" rows="5" placeholder="输入个性签名">{$userinfo.detail.signature}</textarea>
                </div>
           </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-3"></label>
                <div class="col-xs-12 col-sm-6 text-center">
                 <button type="submit" class="btn btn-success btn-block" id="submit" from="form-info">提交</button>
                </div>
           </div>          
                                                                                        
    </form>  
    
</div>
<div class="tab-pane fade" id="tab_2">
<form class="form-horizontal"  method="post" role="form" action="{:zp_url('user/center/email')}" onSubmit="return false;">
<div class="remind-notice"> 友情提示：订阅提示有2种提示方式，站内提示和邮件提示。您能可以根据自己的习惯选择，或者一起选择。 </div>

           <div class="form-group">
                <label for="nickname" class="control-label col-xs-12 col-sm-3">订阅提醒：</label>
                <div class="col-xs-12 col-sm-6">
                   <label class="label-checkbox" for="if_email" hidefocus>
                    <input type="checkbox" value="1" name="info[isstation]" id="if_email" {if condition="$userinfo[isstation] eq 1"} checked="checked"{/if}/>
                   开通订阅提醒功能</label>

                </div>
           </div>
           
           <div class="form-group">
                <label for="nickname" class="control-label col-xs-12 col-sm-3">订阅邮件提醒：</label>
                <div class="col-xs-12 col-sm-6">
                    <label class="label-checkbox" for="if_inter" hidefocus="" >
    <input type="checkbox" name="info[isRemind]" value="1" id="if_inter" {if condition="$userinfo[isRemind] eq 1"} checked="checked"{/if}>开通订阅邮件提醒功能</label>
                </div>
           </div>
           <div class="form-group">
                <label for="nickname" class="control-label col-xs-12 col-sm-3">订阅邮箱：</label>
                <div class="col-xs-12 col-sm-6">
<input type="text" class="form-control" value="{$userinfo[iemail]}" name="info[iemail]" autocomplete="false">
<span>推荐使用QQ邮箱，订阅有更新时，发送至您的指定邮箱。</span>
                </div>
           </div>  
             <div class="form-group">
                <label class="control-label col-xs-12 col-sm-3"></label>
                <div class="col-xs-12 col-sm-6 text-center">
                 <button type="submit" class="btn btn-success btn-block" id="submit" from="form-remind">提交</button>
                </div>
           </div>                                                                                                              
    </form>   
</div>       
<div class="tab-pane fade" id="tab_3">
<div class="form-group">
<div class="col-xs-12 col-sm-12">
<form action="{:zp_url('user/upload/cropImg')}" method="post" id="pic" class="update-pic cf">
	<div class="upload-area">
		<input type="file" id="user-pic">
		<div class="file-tips">支持JPG,PNG,GIF，图片小于1MB，尺寸不小于100*100,真实高清头像更受欢迎！</div>
		<div class="preview hidden" id="preview-hidden"></div>
	</div>
	<div class="preview-area">
		<input type="hidden" id="x" name="x" />
		<input type="hidden" id="y" name="y" />
		<input type="hidden" id="w" name="w" />
		<input type="hidden" id="h" name="h" />
		<input type="hidden" id='img_src' name='src'/>
		<div class="tcrop">头像预览</div>
		<div class="crop crop150"><img id="crop-preview-150" src=""></div>
		<div class="crop crop80"><img id="crop-preview-80" src=""></div>
        <div class="crop crop45"><img id="crop-preview-45" src=""></div>
		<a class="uppic-btn save-pic" href="javascript:;">保存</a>
		<a class="uppic-btn reupload-img" href="javascript:$('#user-pic').uploadify('cancel','*');">重新上传</a>
	</div>
</form>

</div>
</div>
</div>
<script type="text/javascript">
	$(function(){
		//上传头像(uploadify插件)
		$("#user-pic").uploadify({
			'queueSizeLimit' : 1,
			'removeTimeout' : 0.5,
			'preventCaching' : true,
			'multi'    : false,
			'swf' 			: '{$apicss}admin/uploadify/uploadify.swf',
			'uploader' 		: '{:zp_url('user/upload/uploadImg')}',
			'buttonText' 	: '<i class="userup-icon"></i>上传头像',
			'width' 		: '200',
			'height' 		: '200',
			'fileObjName'   : 'file',
			'formData'      : {'session_key':'{$session_key}','session_id':'{$session_id}'},
			'fileTypeExts'	: '*.jpg; *.png; *.gif;',
			'onUploadSuccess' : function(file, data, response){
				var data = $.parseJSON(data);
				if(data['status'] == 0){
					 $.showfloatdiv({txt: data['info']}), $.hidediv({})
					return;
				}
				var preview = $('.upload-area').children('#preview-hidden');
				preview.show().removeClass('hidden');
				//两个预览窗口赋值
				$('.crop').children('img').attr('src',data['data']+'?random='+Math.random());
				$('#avatar').attr('src',data['data']+'?random='+Math.random());
				//隐藏表单赋值
				$('#img_src').val(data['data']);
				//绑定需要裁剪的图片
				var img = $('<img />');
				preview.append(img);
				preview.children('img').attr('src',data['data']+'?random='+Math.random());
				var crop_img = preview.children('img');
				crop_img.attr('id',"cropbox").show();
				var img = new Image();
				img.src = data['data']+'?random='+Math.random();
				//根据图片大小在画布里居中
				img.onload = function(){
					var img_height = 0;
					var img_width = 0;
					var real_height = img.height;
					var real_width = img.width;
					if(real_height > real_width && real_height > 200){
						var persent = real_height / 200;
						real_height = 200;
						real_width = real_width / persent;
					}else if(real_width > real_height && real_width > 200){
						var persent = real_width / 200;
						real_width = 200;
						real_height = real_height / persent;
					}
					if(real_height < 200){
						img_height = (200 - real_height)/2;	
					}
					if(real_width < 200){
						img_width = (200 - real_width)/2;
					}
					preview.css({width:(200-img_width)+'px',height:(200-img_height)+'px'});
					preview.css({paddingTop:img_height+'px',paddingLeft:img_width+'px'});			
				}
				//裁剪插件
				$('#cropbox').Jcrop({
		            bgColor:'#333',   //选区背景色
		            bgFade:true,      //选区背景渐显
		            fadeTime:1000,    //背景渐显时间
		            allowSelect:false, //是否可以选区，
		            allowResize:true, //是否可以调整选区大小
		            aspectRatio: 1,     //约束比例
		            minSize : [200,200],//可选最小大小
		            boxWidth : 200,		//画布宽度
		            boxHeight : 200,	//画布高度
		            onChange: showPreview,//改变时重置预览图
		            onSelect: showPreview,//选择时重置预览图
		            setSelect:[ 0, 0, 200, 200],//初始化时位置
		            onSelect: function (c){	//选择时动态赋值，该值是最终传给程序的参数！
			            $('#x').val(c.x);//需裁剪的左上角X轴坐标
			            $('#y').val(c.y);//需裁剪的左上角Y轴坐标
			            $('#w').val(c.w);//需裁剪的宽度
			            $('#h').val(c.h);//需裁剪的高度
		          }
		        });
				//提交裁剪好的图片
				$('.save-pic').click(function(){						 
					if($('#preview-hidden').html() == ''){
						$.showfloatdiv({txt: '请先上传图片！'}), $.hidediv({})
					}else{
						$.showfloatdiv({txt: '图片处理中，请稍候……',cssname: 'loading'}), $.hidediv({})
						$('#pic').submit();
					}
				});
				//重新上传,清空裁剪参数
				var i = 0;
				$('.reupload-img').click(function(){
					$('#preview-hidden').find('*').remove();
					$('#preview-hidden').hide().addClass('hidden').css({'padding-top':0,'padding-left':0});
				});
		     }
		});
		//预览图
		function showPreview(coords){
			var img_width = $('#cropbox').width();
			var img_height = $('#cropbox').height();
			  //根据包裹的容器宽高,设置被除数
			  var rx = 150 / coords.w;
			  var ry = 150 / coords.h; 
			  $('#crop-preview-150,#avatar').css({
			    width: Math.round(rx * img_width) + 'px',
			    height: Math.round(ry * img_height) + 'px',
			    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
			    marginTop: '-' + Math.round(ry * coords.y) + 'px'
			  });
			  rx = 80 / coords.w;
			  ry = 80 / coords.h;
			  $('#crop-preview-80').css({
			    width: Math.round(rx * img_width) + 'px',
			    height: Math.round(ry * img_height) + 'px',
			    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
			    marginTop: '-' + Math.round(ry * coords.y) + 'px'
			  });
			  rx = 45 / coords.w;
			  ry = 45 / coords.h;
			  $('#crop-preview-45').css({
			    width: Math.round(rx * img_width) + 'px',
			    height: Math.round(ry * img_height) + 'px',
			    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
			    marginTop: '-' + Math.round(ry * coords.y) + 'px'
			  });			  
		}
	})
	
</script>



<div class="tab-pane fade" id="tab_4">
{if condition="(!empty($snsconfig['api_qq_key'])) and (!empty($snsconfig['api_qq_secret']))"}
<div class="col-md-12 sns-list">
                <div class="col-md-2 col-sm-2 col-xs-12">
                <div class="login-ico">
                <a rel="nofollow" class="qq text-center"><i class="icon iconfont">&#xe73e;</i></a>
                </div>
                </div>
                <div class="col-md-8 col-sm-8 col-xs-12">
                <strong>腾讯QQ</strong>
                <span>绑定腾讯QQ帐号后，您便可使用腾讯QQ帐号登录网站</span>
                </div>
                <div class="col-md-2 col-sm-2 col-xs-12 text-center"> 
            <a class="btn btn-success" id="delsns" data-id="qq" {empty name="syncs['qq']"}style="display:none"{/empty}>取消绑定</a>
			<a class="btn btn-default"  href="{:zanpian_user_url('user/snslogin/qq')}" target="_self" {notempty name="syncs['qq']"}style="display:none"{/notempty}>立即绑定</a>
                </div>
</div>
{/if}   
 {if condition="(!empty($snsconfig['api_weibo_key'])) and (!empty($snsconfig['api_weibo_secret']))"}
            <div class="col-md-12 sns-list">
                <div class="col-md-2 col-sm-2 col-xs-12">
                <div class="login-ico">
                <a rel="nofollow" class="weibo text-center"><i class="icon iconfont">&#xe73c;</i></a>
                </div>
                </div>
                <div class="col-md-8 col-sm-8 col-xs-12">
                <strong>新浪微博</strong>
                <span>绑定新浪微博帐号后，您便可使用新浪微博帐号登录网站</span>
                </div>
                <div class="col-md-2 col-sm-2 col-xs-12 text-center">
            <a class="btn btn-success" id="delsns" data-id="weibo" {empty name="syncs['weibo']"}style="display:none"{/empty}>取消绑定</a>
			<a class="btn btn-default" href="{:zanpian_user_url('user/snslogin/weibo')}" target="_self" {notempty name="syncs['weibo']"}style="display:none"{/notempty}>立即绑定</a>
                </div>
           </div>        
{/if}          
                
</div>
<div class="tab-pane fade" id="tab_5">
<form class="form-horizontal"  method="post" role="form" action="{:zp_url('user/center/pwd')}" onSubmit="return false;">

           <div class="form-group">
                <label for="password" class="control-label col-xs-12 col-sm-3">原密码：</label>
                <div class="col-xs-12 col-sm-6">
                    <input class="form-control" id="password" name="info[password]" type="password" placeholder="您的新密码" required>
                </div>
           </div>
           <div class="form-group">
                <label for="newpass" class="control-label col-xs-12 col-sm-3">新密码：</label>
                <div class="col-xs-12 col-sm-6">
             <input class="form-control" id="newpass" name="info[newpass]" type="password" placeholder="新密码" required>
                </div>
           </div>
           <div class="form-group">
                <label for="verifypass" class="control-label col-xs-12 col-sm-3">重复密码：</label>
                <div class="col-xs-12 col-sm-6">
             <input class="form-control" id="verifypass" name="info[verifypass]" type="password" placeholder="重复密码" required>
                </div>
           </div>           
             <div class="form-group">
                <label class="control-label col-xs-12 col-sm-3"></label>
                <div class="col-xs-12 col-sm-6 text-center">
                 <button type="submit" class="btn btn-success btn-block" id="submit" from="form-pwd">提交</button>
                </div>
           </div>   
                                                                                                             
    </form>    
</div>                                
</div>           
</div>
</div>
</div>      
</div> 
{include file="user_footer" /}
</body>
</html>